<template>
  <div :class="['task-list', customClass] ">
    <div v-for="(item,i) in tasks" :key="i" class="d-flex border-bottom align-items-center col-wrapper-4" @click="onClick(item)">
      <div class="col d-flex justify-content-center">
        <van-tag round size="medium" :color="item.status|tagtypebystatus">{{item.status | stringTaskStatus}}</van-tag>
      </div>
      <div class="col">
        <div class="text-truncate" style="width:100%">{{item.title}}</div>
        <div class="font-color-light font-small">{{item.content.one}}/{{item.content.two}}/{{item.content.three}}</div>
      </div>
      <div class="col" >{{item.score}}</div>
      <div class="col">{{item.deadLine | deadLineToString(item)}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'

@Component
export default class TaskList extends Vue {
  @Prop(String) customClass;
  @Prop({ default: [] }) tasks;
  @Action goToTaskContent;

  public onClick (item) {
    this.goToTaskContent(item)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.task-list{
  background-color:#fff
}
</style>
